import React, { Component } from 'react';
import { string, number, object } from 'prop-types';
import LinkTitle from '../common/LinkTitle';
import { Icon } from 'antd';
const propTypes = {
  phone: string | number,
  history: object
};
export default function Security({ history, phone }) {
  return (
    <div className="userCWrapper security">
      <div className="ltWrapper">
        <LinkTitle title="安全设置" />
      </div>
      <ul>
        <li className="actItem">
          <div>
            <Icon
              type="check-circle"
              style={{ color: '#556FB5', fontSize: '1rem' }}
            />
            <span
              className="act"
              onClick={() => history.push('/user/security/psd')}
            >
              修改密码
            </span>
          </div>
          <div className="desc">需要手机验证</div>
        </li>
        <li className="actItem">
          <div>
            <Icon
              type="check-circle"
              style={{ color: '#556FB5', fontSize: '1rem' }}
            />
            <span
              className=" act"
              onClick={() => history.push('/user/security/cell')}
            >
              修改手机号
            </span>
            <span>{phone}</span>
          </div>
          <div className="desc">
            为了账号安全，建议您在更换手机号后第一时间更换绑定手机
          </div>
        </li>
      </ul>
    </div>
  );
}
